<style scoped>
.clientUndelivered{
  margin-right: 0.5vw;
  padding: 0 15px;
  background-color: white;
  height: 95vh;
  position: relative;
}
.od-top{
  padding: 1.5vh 0;
  border-bottom: 2px solid #f4f4f4;
}
.od-top1 p:first-child{
  margin-right: 0.5vw;
  display: inline-block;
  white-space:nowrap;
}
.od-top1 p:not(:first-child){
  margin: 0 0.5vw;
  display: inline-block;
  white-space:nowrap;
}
.od-top2{
  margin-top: 1.5vh;
  display: flex;
}
.od-top2 p{
  margin: 3px 6px 0 0;
}
.od-btn{
  padding: 1.5vh 0;
  display: flex;
  justify-content: space-between;
}
.footView span{
    float: left;
    margin-right: 48px;
    line-height: 6vh;
    font-size: 14px;
  }
</style>

<style>
.clientUndelivered .od-top1 .el-input__inner, .clientUndelivered .od-top1 .el-input{
  height: 30px;
  width: 8vw;
}
.clientUndelivered .od-top .od-top1 .el-input{
  width: 8vw;
}
.clientUndelivered .od-top .od-top2 .el-input__inner{
  width: 370px;
  height: 30px;
}
.clientUndelivered .el-select .el-input__icon{
    line-height: 30px;
  }
.clientUndelivered .el-date-editor .el-range__icon, .clientUndelivered .el-date-editor .el-range-separator{
  line-height: 24px;
}
.clientUndelivered .el-cascader {
  line-height: 30px;
}
</style>

<template>
  <div class="clientUndelivered">
    <div class="od-top">
      <div class="od-top1">
        <p>客户</p>
        <el-select  :disabled="jxAgent"
          v-model="customerNo"
          clearable>
          <el-option v-for="item in customerList" :key="item.value" :label="item.label" :value="item.value">
            <span style="float:left">{{item.value}}</span>
            <span style="float:right">{{item.label}}</span>
          </el-option>
        </el-select>

        <p>类型</p>
        <el-select v-model="type">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

        <p>货号</p>
        <el-input v-model="kindsNumber"></el-input>

      <p>未出量</p>
      <el-input v-model="notOutNumber">
        <template slot="prepend">>=</template>
      </el-input>


        <p>品牌</p>
        <el-select v-model="brandedName">
          <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>

        <p>品名</p>
        <el-select v-model="commodityName">
          <el-option
            v-for="item in commodityNameList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="od-top2">
        <p>日期</p>
          <el-date-picker
            unlink-panels
            v-model="dateList"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd">
          </el-date-picker>
      </div>
    </div>

    <div class="od-btn">
      <div>
        <el-button @click="search" icon="el-icon-search" type="primary">查询</el-button>
        <el-button @click="exportTable" icon="el-icon-upload2">导出</el-button>
      </div>
      <div class="od-top1">
        <p>合计方式</p>
        <el-select v-model="summation">
          <el-option
            v-for="item in summationType"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <p>排序方式</p>
        <el-select v-model="sortType">
          <el-option
            v-for="item in sortTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>

    <el-table
      id="outTable"
      ref="table"
      :data="tableData"
      style="width: 100%"
      :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" 
      :cell-style="{padding:0,height:'36px'}" 
      height="71vh">
      <el-table-column
        type="index"
        label="序号"
        width="50">
      </el-table-column>
      <template v-for="i in hList">
        <el-table-column
          :prop="i.prop"
          :label="i.label"
          :width="i.width"
          :key="i.prop"
          :sortable="i.isSort">
        </el-table-column>
      </template>
    </el-table>

    <foot-view class="footView"
      :pagesNum="pagesNum" 
      :hasPagination=true
      :pageSize="limit"
      :tableTypeChange="tableTypeChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange">
      <div slot="text">
        <span>数据库：{{jxQuarter}}</span>
      </div>
    </foot-view>

  </div>
</template>

<script>
import { selectNotOut } from '../../../network/customerOrderTotal'
import { getClient } from '../../../network/client'
import { getBranded } from '../../../network/branded'
import { getProductName } from '../../../network/productName'

import today from '../../../components/mixins/today'
import enterUp from '../../../components/mixins/enterUp'

import footView from '../../../components/FootView'

import table2excel from 'js-table2excel'

export default {
  name:'client_order_goods_undelivered',
  mixins: [today,enterUp],
  created(){
    let jxQuarterVal = document.cookie.match(RegExp('jxQuarter' + '=([^;]+)'))
    let jxAgentVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    let operatorVal = document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))
    this.jxQuarter = jxQuarterVal ? jxQuarterVal[1] : null
    this.operator = operatorVal ? operatorVal[1] : null
   if(jxAgentVal){
    this.jxAgent = jxAgentVal[1] == 1 ? true : false
   }
   
    this.inpList = this.getInput()
    this.hList = this.hList1

    // 默认选之前一周
    // this.dateList = [this.searchDate(7),this.searchDate()]

    // 获取所有客户信息
    getClient({limit:99999}).then(res => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          if(e.stop != 1){
            this.customerList.push({value:e.no,label:e.name})
          }
        })
        if (this.jxAgent) {
          for (const i of this.customerList) {
            if (i.label == this.operator) {
              this.customerNo = i.value
              break
            }
          }
        }
      }
    })
    // 获取品牌
    getBranded().then(res => {
      res.data.data.forEach(e => {
        this.brandList.push({value:e.name,label:e.name})
      })
    })
    // 获取品名信息
    getProductName().then(res => {
      if (res.data.code == 200) {
        let list = res.data.data
        list.forEach(e => {
          this.commodityNameList.push({value:e.name,label:e.name})
        })
      }
    })
  },
  data(){
    return {
      inpList: [],
      // 总数据条数
      dataLen: 0,
      // 总页码
      pagesNum: 0,
      // 分页条数
      limit: 20,
      // 当前页码
      currentPage: 1,
      tableTypeChange: false,

      props: { multiple: true },
      
      customerNo: '',
      customerList: [],
      type: '',
      typeList: [
        {value:'代理',label:'代理'},
        {value:'商场',label:'商场'},
        {value:'门市',label:'门市'},
        {value:'代销',label:'代销'},
        {value:'散客',label:'散客'},
        {value:'寄卖',label:'寄卖'},
        {value:'买断',label:'买断'}
      ],
      kindsNumber: '',
      notOutNumber: '',
      brandedName: '',
      brandList: [],
      commodityName: '',
      commodityNameList: [],
      dateList: null,

      summation: 1,
      summationType: [
        {value:1,label:'不合计'},
        {value:2,label:'客户合计'},
        {value:3,label:'客户-款号合计'},
        {value:4,label:'货号合计'},
        {value:5,label:'款号合计'},
        {value:6,label:'总合计'},
      ],
      sortType: '',
      sortTypeList: [
        {value:1,label:'客户排序'},
        {value:2,label:'货号排序'},
        {value:3,label:'未出量排序'},
      ],

      hList: [],
      // 不合计
      hList1: [
        {prop:'customerNo',label:'客户编号',width:'100',isSort:true},
        {prop:'styleNumber',label:'款号',width:'140',isSort:true},
        {prop:'colorNo',label:'色号',width:''},
        {prop:'colorName',label:'颜色',width:''},
        {prop:'commodityName',label:'品名',width:''},
        {prop:'customerName',label:'客户简称',width:''},
        {prop:'differenceC05',label:'C05',width:''},
        {prop:'differenceC07',label:'C07',width:''},
        {prop:'differenceC09',label:'C09',width:''},
        {prop:'differenceC11',label:'C11',width:''},
        {prop:'differenceC13',label:'C13',width:''},
        {prop:'differenceC15',label:'C15',width:''},
        {prop:'differenceC17',label:'C17',width:''},
        {prop:'differenceC19',label:'C19',width:''},
        {prop:'differenceC21',label:'C21',width:''},
        {prop:'differenceC23',label:'C23',width:''},
        {prop:'differenceF',label:'F',width:''},
        {prop:'differenceTotalNumber',label:'总数量',width:''},
      ],
      // 客户合计
      hList2: [
        {prop:'customerNo',label:'客户编号',width:'',isSort:true},
        {prop:'customerName',label:'客户简称',width:''},
        {prop:'differenceTotalNumber',label:'未出数量',width:'',isSort:true},
        {prop:'orderTotalNumber',label:'客户订货',width:''},
        {prop:'inputTotalNumber',label:'客户进货',width:''},
        {prop:'outNumber',label:'客户退货',width:''},
      ],
      // 客户-款号合计
      hList3: [
        {prop:'customerNo',label:'客户编号',width:'',isSort:true},
        {prop:'customerName',label:'客户简称',width:''},
        {prop:'styleNumber',label:'款号',width:''},
        {prop:'differenceTotalNumber',label:'未出数量',width:'',isSort:true},
        {prop:'orderTotalNumber',label:'客户订货',width:''},
        {prop:'inputTotalNumber',label:'客户进货',width:''},
        {prop:'outNumber',label:'客户退货',width:''},
      ],
      // 货号合计
      hList4: [
        {prop:'kindsNumber',label:'货号',width:'',isSort:true},
        {prop:'differenceTotalNumber',label:'未出数量',width:'',isSort:true},
        {prop:'orderTotalNumber',label:'客户订货',width:''},
        {prop:'inputTotalNumber',label:'客户进货',width:''},
        {prop:'outNumber',label:'客户退货',width:''},
        {prop:'manufacturerNotOut',label:'厂商未交',width:''},
        {prop:'warehouseInventory',label:'仓库库存',width:''},
      ],
      // 款号合计
      hList5: [
        {prop:'styleNumber',label:'款号',width:''},
        {prop:'differenceTotalNumber',label:'未出数量',width:'',isSort:true},
        {prop:'orderTotalNumber',label:'客户订货',width:''},
        {prop:'inputTotalNumber',label:'客户进货',width:''},
        {prop:'outNumber',label:'客户退货',width:''},
        {prop:'manufacturerNotOut',label:'厂商未交',width:''},
        {prop:'warehouseInventory',label:'仓库库存',width:''},
      ],
      // 总合计
      hList6: [
        {prop:'total',label:'合计',width:''},
        {prop:'notOutTotalNumber',label:'未出数量',width:''},
        {prop:'orderTotalNumber',label:'客户订货',width:''},
        {prop:'inputTotalNumber',label:'客户进货',width:''},
        {prop:'outTotalNumber',label:'客户退货',width:''},
      ],

      tableData: [],
      // 不合计
      notTotal: [],
      // 客户合计
      customerTotal: [],
      // 客户-款号合计
      customerStyleTotal: [],
      // 货号合计
      kindsNumberTotal: [],
      // 款号合计
      styleTotal: [],
      // 总合计
      totalData: [],
      jxQuarter: null,
      jxAgent:null,
      operator:null,
      // jxQuarter: document.cookie.match(RegExp('jxQuarter'+'=([^;]+)'))[1],
      // jxAgent: document.cookie.match(RegExp('jxAgent'+'=([^;]+)'))[1] == 1 ? true : false,
      // operator: document.cookie.match(RegExp('jxUser'+'=([^;]+)'))[1]
    }
  },
  watch: {
    summation(a,b){
      this.currentPage = 1
      this.tableTypeChange = !this.tableTypeChange

      switch (a) {
        case 1:
          this.hList = this.hList1
          this.dataLen = this.notTotal.length
          this.tableData = this.notTotal.slice(0,this.limit)
          break;
        case 2:
          this.hList = this.hList2
          this.dataLen = this.customerTotal.length
          this.tableData = this.customerTotal.slice(0,this.limit)
          break;
        case 3:
          this.hList = this.hList3
          this.dataLen = this.customerStyleTotal.length
          this.tableData = this.customerStyleTotal.slice(0,this.limit)
          break;
        case 4:
          this.hList = this.hList4
          this.dataLen = this.kindsNumberTotal.length
          this.tableData = this.kindsNumberTotal.slice(0,this.limit)
          break;
        case 5:
          this.hList = this.hList5
          this.dataLen = this.styleTotal.length
          this.tableData = this.styleTotal.slice(0,this.limit)
          break;
        case 6:
          this.hList = this.hList6
          this.dataLen = this.totalData.length
          this.tableData = this.totalData.slice(0,this.limit)
          break;
      }
    },
    sortType(a,b){
      switch (a) {
        case 1:
          this.notTotal.sort((a,b) => {
            return a.customerNo.localeCompare(b.customerNo)
          })
          this.customerTotal.sort((a,b) => {
            return a.customerNo.localeCompare(b.customerNo)
          })
          this.customerStyleTotal.sort((a,b) => {
            return a.customerNo.localeCompare(b.customerNo)
          })
          break;
        case 2:
          this.notTotal.sort((a,b) => {
            return a.kindsNumber.localeCompare(b.kindsNumber)
          })
          this.kindsNumberTotal.sort((a,b) => {
            return a.kindsNumber.localeCompare(b.kindsNumber)
          })
          break;
        case 3:
          this.customerTotal.sort((a,b) => {
            return a.differenceTotalNumber - b.differenceTotalNumber
          })
          this.customerStyleTotal.sort((a,b) => {
            return a.differenceTotalNumber - b.differenceTotalNumber
          })
          this.kindsNumberTotal.sort((a,b) => {
            return a.differenceTotalNumber - b.differenceTotalNumber
          })
          this.styleTotal.sort((a,b) => {
            return a.differenceTotalNumber - b.differenceTotalNumber
          })
          break;
      }
      this.changeShow()
    },
    dataLen(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    },
    limit(a,b){
      this.pagesNum = Math.ceil(this.dataLen / this.limit)
    }
  },
  methods: {
    search(){
      selectNotOut({
        customerNo: this.customerNo,
        type: this.type,
        kindsNumber: this.kindsNumber ? "'" + this.kindsNumber + "'" : '',
        notOutNumber: this.notOutNumber,
        brandedName: this.brandedName,
        commodityName: this.commodityName,
        startTime: (this.dateList == null || this.dateList == '') ? '' : this.dateList[0] + ' 00:00:00',
        endTime: (this.dateList == null || this.dateList == '') ? '' : this.dateList[1] + ' 23:59:59'
      }).then(res => {
        this.hList = this.hList1
        this.summation = 1
        this.sortType = 1
        this.notTotal = []
        this.customerTotal = []
        this.customerStyleTotal = []
        this.kindsNumberTotal = []
        this.styleTotal = []
        this.totalData = []
        this.tableData = []
        if (res.data.code == 200) {
          // 不合计
          this.notTotal = res.data.data.notTotal
          // 客户合计
          this.customerTotal = res.data.data.customerTotal
          // 客户-款号合计
          this.customerStyleTotal = res.data.data.customerStyleTotal
          // 货号合计
          this.kindsNumberTotal = res.data.data.kindsNumberTotal
          // 款号合计
          this.styleTotal = res.data.data.styleTotal

          this.totalData = [
            {
              total: '合计',
              // 进货总数
              inputTotalNumber: res.data.data.inputTotalNumber,
              // 未出总数
              notOutTotalNumber: res.data.data.notOutTotalNumber,
              // 订货总数
              orderTotalNumber: res.data.data.orderTotalNumber,
              // 退货总数
              outTotalNumber: res.data.data.outTotalNumber,
            }
          ]

          this.tableData = this.notTotal
        }
        if (!this.tableData.length) {
          this.$message.info('暂无数据')
        }
      })
    },
    exportTable(){
      let column = []
      switch (this.summation) {
        case 1:
          column = [
            {key:'customerNo',title:'客户编号',type: 'text'},
            {key:'styleNumber',title:'款号',type: 'text'},
            {key:'colorNo',title:'色号',type: 'text'},
            {key:'colorName',title:'颜色',type: 'text'},
            {key:'commodityName',title:'品名',type: 'text'},
            {key:'customerName',title:'客户简称',type: 'text'},
            {key:'differenceC05',title:'C05',type: 'text'},
            {key:'differenceC07',title:'C07',type: 'text'},
            {key:'differenceC09',title:'C09',type: 'text'},
            {key:'differenceC11',title:'C11',type: 'text'},
            {key:'differenceC13',title:'C13',type: 'text'},
            {key:'differenceC15',title:'C15',type: 'text'},
            {key:'differenceC17',title:'C17',type: 'text'},
            {key:'differenceC19',title:'C19',type: 'text'},
            {key:'differenceC21',title:'C21',type: 'text'},
            {key:'differenceC23',title:'C23',type: 'text'},
            {key:'differenceF',title:'F',type: 'text'},
            {key:'differenceTotalNumber',title:'总数量',type: 'text'}
          ]
          table2excel(column, this.notTotal, "客户订货未交量不合计.xls")
          break;
        case 2:
          column = [
            {key:'customerNo',title:'客户编号',type: 'text'},
            {key:'customerName',title:'客户简称',type: 'text'},
            {key:'differenceTotalNumber',title:'未出数量',type: 'text'},
            {key:'orderTotalNumber',title:'客户订货',type: 'text'},
            {key:'inputTotalNumber',title:'客户进货',type: 'text'},
            {key:'outNumber',title:'客户退货',type: 'text'},
          ]
          table2excel(column, this.customerTotal, "客户订货未交量客户合计.xls")
          break;
        case 3:
          column = [
            {key:'customerNo',title:'客户编号',type: 'text'},
            {key:'customerName',title:'客户简称',type: 'text'},
            {key:'styleNumber',title:'款号',type: 'text'},
            {key:'differenceTotalNumber',title:'未出数量',type: 'text'},
            {key:'orderTotalNumber',title:'客户订货',type: 'text'},
            {key:'inputTotalNumber',title:'客户进货',type: 'text'},
            {key:'outNumber',title:'客户退货',type: 'text'},
          ]
          table2excel(column, this.customerStyleTotal, "客户订货未交量客户-款号合计.xls")
          break;
        case 4:
          column = [
            {key:'kindsNumber',title:'货号',type: 'text'},
            {key:'differenceTotalNumber',title:'未出数量',type: 'text'},
            {key:'orderTotalNumber',title:'客户订货',type: 'text'},
            {key:'inputTotalNumber',title:'客户进货',type: 'text'},
            {key:'outNumber',title:'客户退货',type: 'text'},
            {key:'manufacturerNotOut',title:'厂商未交',type: 'text'},
            {key:'warehouseInventory',title:'仓库库存',type: 'text'},
          ]
          table2excel(column, this.kindsNumberTotal, "客户订货未交量货号合计.xls")
          break;
        case 5:
          column = [
            {key:'styleNumber',title:'款号',type: 'text'},
            {key:'differenceTotalNumber',title:'未出数量',type: 'text'},
            {key:'orderTotalNumber',title:'客户订货',type: 'text'},
            {key:'inputTotalNumber',title:'客户进货',type: 'text'},
            {key:'outNumber',title:'客户退货',type: 'text'},
            {key:'manufacturerNotOut',title:'厂商未交',type: 'text'},
            {key:'warehouseInventory',title:'仓库库存',type: 'text'},
          ]
          table2excel(column, this.styleTotal, "客户订货未交量款号合计.xls")
          break;
        case 6:
          column = [
            {key:'total',title:'合计',type: 'text'},
            {key:'notOutTotalNumber',title:'未出数量',type: 'text'},
            {key:'orderTotalNumber',title:'客户订货',type: 'text'},
            {key:'inputTotalNumber',title:'客户进货',type: 'text'},
            {key:'outTotalNumber',title:'客户退货',type: 'text'},
          ]
          table2excel(column, this.totalData, "客户订货未交量总合计.xls")
          break;
      }
    },

    // 每页显示页数改变
    handleSizeChange(val){
      this.limit = val
      this.changeShow()
    },
    // 当前页改变
    handleCurrentChange(val){
      this.currentPage = val
      this.changeShow()
    },
    changeShow(){
      switch (this.summation) {
        case 1:
          this.dataLen = this.notTotal.length
          this.tableData = this.notTotal.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case 2:
          this.dataLen = this.customerTotal.length
          this.tableData = this.customerTotal.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case 3:
          this.dataLen = this.customerStyleTotal.length
          this.tableData = this.customerStyleTotal.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case 4:
          this.dataLen = this.kindsNumberTotal.length
          this.tableData = this.kindsNumberTotal.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case 5:
          this.dataLen = this.styleTotal.length
          this.tableData = this.styleTotal.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
        case 6:
          this.dataLen = this.totalData.length
          this.tableData = this.totalData.slice((this.currentPage-1)*this.limit,this.currentPage*this.limit)
          break;
      }
      this.$forceUpdate()
    }
  },
  components:{
    footView
  },
}
</script>